<template>
  <div class="w-full h-full flex flex-col">
    <div class="w-full flex flex-row justify-between">
      <div class="flex flex-row">
        <el-select
          class="w-w300 mr-w30"
          clearable
          v-model="s_video.m_video.typeId"
          placeholder="请选择视频类别"
          @change="action_list_video"
          @clear="action_list_video"
        >
          <el-option
            v-for="item in s_video.list_type"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-input
          placeholder="请输入内容"
          clearable
          prefix-icon="el-icon-search"
          v-model="s_video.m_video.title"
          @clear="action_list_video"
        >
        </el-input>
        <el-button
          type="primary"
          class="bg-cmain_hover ml-w10"
          @click="action_list_video"
          >搜索</el-button
        >
      </div>
      <el-button
        type="primary"
        class="bg-cmain_hover ml-w10"
        icon="el-icon-plus"
        @click="action_video_add('')"
      >
        添加视频</el-button
      >
    </div>
    <div class="w-full h-full mt-w10">
      <el-table
        class="overflow-y-auto"
        :data="s_video.list_video"
        stripe
        style="width: 100%"
        height="700"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column type="index" label="序号" min-width="5%">
        </el-table-column>
        <el-table-column prop="title" label="视频标题" min-width="10%" sortable>
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="视频类型"
          min-width="10%"
          sortable
        >
        </el-table-column>
        <el-table-column prop="cover" label="列表封面" min-width="10%">
          <template slot-scope="scope">
            <el-image
              style="width: 140px; height: 85px"
              :src="scope.row.coverUrl"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="创建时间" min-width="10%" sortable>
        </el-table-column>
        <el-table-column prop="sort" label="排序" min-width="5%">
          <div class="item flex flex-row items-center" slot-scope="scope">
            <div v-if="scope.row.top !== 0">【置顶】</div>
            <div v-else>{{ "【" + scope.row.sort + "】" }}</div>
            <div v-if="scope.row.top === 0" style="display: flex">
              <img
                  class="w-w20 h-w20 cursor-pointer"
                  src="@/assets/image/icon_data_down_normal.png"
                  alt="下移"
                  srcset=""
                  @click="action_move_down(scope.row)"
              />
              <img
                  class="w-w20 h-w20 cursor-pointer"
                  src="@/assets/image/icon_data_up_normal.png"
                  alt="上移"
                  srcset=""
                  @click="action_move_up(scope.row)"
              />
            </div>
          </div>
        </el-table-column>
        <el-table-column label="操作" min-width="10%">
          <template slot-scope="scope">
            <el-button size="mini" @click="action_move_top(scope.row)" v-if="scope.row.top === 0">置顶</el-button>
            <el-button size="mini" @click="action_cancel_top(scope.row)" v-if="scope.row.top !== 0">取消置顶</el-button>
            <el-button size="mini" @click="action_video_add(scope.row.id + '')">
              详情</el-button>
            <el-button
              size="mini"
              style="background-color: #f56c6c"
              type="danger"
              @click="action_del_video(scope.row.id)"
            >
              删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="w-full flex items-end justify-center" style="height: 7%">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="s_video.m_page.total"
          :page-size="s_video.m_page.limit"
          @current-change="action_page_change"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>
</style>
